<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报系统 - 图表版</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#00bfff',
                        secondary: '#00ced1',
                        dark: '#0a1929',
                        light: '#e6f7ff',
                        accent: '#ff6b6b'
                    },
                    fontFamily: {
                        tech: ['Orbitron', 'sans-serif']
                    },
                },
            }
        }
    </script>
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');

        body {
            font-family: 'Orbitron', sans-serif;
            background: linear-gradient(to right, #0a1929, #122945);
            color: #e6f7ff;
            min-height: 100vh;
        }

        .panel-border {
            border: 2px solid #00bfff;
            box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
            border-radius: 10px;
        }

        .glow {
            text-shadow: 0 0 10px rgba(0, 191, 255, 0.7);
        }

        .cyber-button {
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s;
        }

        .cyber-button:hover::before {
            left: 100%;
        }

        .scan-line {
            background: linear-gradient(to bottom,
            rgba(0, 191, 255, 0) 0%,
            rgba(0, 191, 255, 0.3) 50%,
            rgba(0, 191, 255, 0) 100%);
            height: 20%;
            width: 100%;
            position: absolute;
            animation: scan 2s linear infinite;
        }

        @keyframes scan {
            0% { top: -20%; }
            100% { top: 100%; }
        }

        .scan-container {
            position: relative;
            overflow: hidden;
        }

        .input-field {
            transition: all 0.3s ease;
        }

        .input-field:focus {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 191, 255, 0.3);
        }

        .info-card {
            transition: all 0.3s ease;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 191, 255, 0.4);
        }

        .fade-in {
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .temp-chart-container {
            position: relative;
            height: 300px;
            background: rgba(10, 25, 41, 0.7);
            border-radius: 8px;
            padding: 15px;
        }

        .current-time-marker {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #ff6b6b;
            z-index: 10;
        }

        .current-time-marker::after {
            content: '';
            position: absolute;
            top: -5px;
            left: -4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ff6b6b;
        }

        .hour-label {
            position: absolute;
            bottom: -25px;
            font-size: 12px;
            text-align: center;
            width: 40px;
            left: -20px;
        }

        .hour-marker {
            position: absolute;
            bottom: 0;
            width: 1px;
            height: 10px;
            background: rgba(0, 191, 255, 0.5);
        }

        .weather-icon {
            position: absolute;
            top: 10px;
            left: 0;
            width: 40px;
            text-align: center;
            font-size: 18px;
            color: #00bfff;
        }
    </style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8">
    <!-- 头部 -->
    <header class="mb-10 text-center">
        <h1 class="text-4xl font-bold glow mb-2">科技机械风天气预报</h1>
        <p class="text-primary text-lg">精准、炫酷的天气数据展示</p>
    </header>

    <!-- 查询区域 -->
    <div class="panel-border p-6 mb-10 fade-in">
        <h2 class="text-xl font-semibold glow mb-4">查询设置</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div class="lg:col-span-2">
                <label class="block text-sm text-primary mb-1">城市</label>
                <input type="text" id="cityInput" placeholder="输入城市名称" value="杭州"
                       class="w-full input-field bg-dark/50 border border-primary/50 rounded px-3 py-2 text-light focus:outline-none focus:ring-1 focus:ring-primary">
            </div>
            <div>
                <label class="block text-sm text-primary mb-1">省份</label>
                <input type="text" id="provinceInput" placeholder="输入省份（可选）"
                       class="w-full input-field bg-dark/50 border border-primary/50 rounded px-3 py-2 text-light focus:outline-none focus:ring-1 focus:ring-primary">
            </div>
            <div>
                <label class="block text-sm text-primary mb-1">IP地址</label>
                <input type="text" id="ipInput" placeholder="输入IP地址（可选）"
                       class="w-full input-field bg-dark/50 border border-primary/50 rounded px-3 py-2 text-light focus:outline-none focus:ring-1 focus:ring-primary">
            </div>
            <div class="flex items-end">
                <button id="queryBtn" class="w-full cyber-button bg-primary/20 hover:bg-primary/40 text-primary border border-primary rounded px-4 py-2 transition-all">
                    <i class="fa fa-search mr-2"></i>查询天气
                </button>
            </div>
        </div>
        <div class="mt-4 text-xs text-primary/70">
            <p>提示：只需填写城市名称即可查询，省份和IP为可选参数</p>
        </div>
    </div>

    <!-- 主要天气信息 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
        <!-- 左侧-基本信息 -->
        <div class="lg:col-span-1 panel-border p-6 scan-container fade-in">
            <div class="scan-line"></div>
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold glow">城市信息</h2>
                <span class="text-primary" id="updateTime">更新时间：--:--</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="text-4xl mb-4" id="city">--</div>
                <div class="text-xl mb-2" id="country">--</div>
                <div class="text-lg" id="date">----/--/--</div>
                <div class="text-lg" id="week">星期--</div>
            </div>
            <div class="mt-8">
                <h3 class="text-lg font-semibold mb-4">当前天气</h3>
                <div class="flex items-center justify-center">
                    <div class="text-2xl mr-4" id="wea">--</div>
                    <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center" id="weatherIcon">
                        <i class="fa fa-question text-2xl text-primary"></i>
                    </div>
                </div>
                <div class="mt-4 flex justify-center">
                    <div class="text-2xl" id="temp">--°</div>
                    <div class="ml-4 flex flex-col justify-center">
                        <div class="text-sm">白天：<span id="temp1">--°</span> 夜间：<span id="temp2">--°</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间-详细天气数据 -->
        <div class="lg:col-span-2 panel-border p-6 fade-in">
            <h2 class="text-xl font-semibold glow mb-6">详细天气数据</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="info-card bg-dark/50 rounded-lg p-4 text-center hover:bg-dark/80 transition-all">
                    <div class="text-primary mb-2">风向风力</div>
                    <div class="text-xl" id="win">--</div>
                    <div class="text-sm" id="winSpeed">--</div>
                </div>
                <div class="info-card bg-dark/50 rounded-lg p-4 text-center hover:bg-dark/80 transition-all">
                    <div class="text-primary mb-2">湿度</div>
                    <div class="text-xl" id="humidity">--</div>
                </div>
                <div class="info-card bg-dark/50 rounded-lg p-4 text-center hover:bg-dark/80 transition-all">
                    <div class="text-primary mb-2">能见度</div>
                    <div class="text-xl" id="visibility">--</div>
                </div>
                <div class="info-card bg-dark/50 rounded-lg p-4 text-center hover:bg-dark/80 transition-all">
                    <div class="text-primary mb-2">气压</div>
                    <div class="text-xl" id="pressure">--</div>
                    <div class="text-xs">hPa</div>
                </div>
            </div>

            <div class="mt-8">
                <h3 class="text-lg font-semibold mb-4">空气质量</h3>
                <div class="bg-dark/50 rounded-lg p-4">
                    <div class="flex items-center mb-2">
                        <div class="w-2 h-2 rounded-full bg-gray-500 mr-2" id="airQualityDot"></div>
                        <div class="text-lg" id="airLevel">--</div>
                        <div class="ml-4 text-lg" id="airValue">--</div>
                    </div>
                    <div class="text-sm" id="airTips">--</div>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                        <div>
                            <div class="text-xs text-primary">PM2.5</div>
                            <div class="text-lg" id="airPm25">--</div>
                        </div>
                        <div>
                            <div class="text-xs text-primary">PM10</div>
                            <div class="text-lg" id="pm10">--</div>
                        </div>
                        <div>
                            <div class="text-xs text-primary">O₃</div>
                            <div class="text-lg" id="o3">--</div>
                        </div>
                        <div>
                            <div class="text-xs text-primary">NO₂</div>
                            <div class="text-lg" id="no2">--</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <h3 class="text-lg font-semibold mb-4">生活建议</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="info-card bg-dark/50 rounded-lg p-3 hover:bg-dark/80 transition-all">
                        <div class="text-xs text-primary">口罩</div>
                        <div class="text-sm" id="kouzhao">--</div>
                    </div>
                    <div class="info-card bg-dark/50 rounded-lg p-3 hover:bg-dark/80 transition-all">
                        <div class="text-xs text-primary">运动</div>
                        <div class="text-sm" id="yundong">--</div>
                    </div>
                    <div class="info-card bg-dark/50 rounded-lg p-3 hover:bg-dark/80 transition-all">
                        <div class="text-xs text-primary">外出</div>
                        <div class="text-sm" id="waichu">--</div>
                    </div>
                    <div class="info-card bg-dark/50 rounded-lg p-3 hover:bg-dark/80 transition-all">
                        <div class="text-xs text-primary">开窗</div>
                        <div class="text-sm" id="kaichuang">--</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 预警信息 -->
    <div class="panel-border p-6 mb-10 fade-in">
        <h2 class="text-xl font-semibold glow mb-4">天气预警</h2>
        <div id="alarmList" class="space-y-4">
            <!-- 预警信息将动态填充 -->
            <div class="bg-dark/50 rounded-lg p-4 text-center" id="noAlarm">
                暂无预警信息
            </div>
        </div>
    </div>

    <!-- 小时预报图表 -->
    <div class="panel-border p-6 fade-in">
        <h2 class="text-xl font-semibold glow mb-4">小时预报</h2>
        <div class="temp-chart-container">
            <canvas id="hourlyChart"></canvas>
        </div>
        <div class="mt-4 flex justify-between text-xs text-primary/70">
            <div>当前时间：<span id="currentTime">--:--</span></div>
            <div>体感温度：<span id="feelsLike">--°C</span></div>
        </div>
    </div>
</div>

<script>
    // 天气图标映射
    const weatherIconMap = {
        '晴': 'fa-sun-o',
        '多云': 'fa-cloud',
        '阴': 'fa-cloud',
        '雨': 'fa-tint',
        '小雨': 'fa-tint',
        '中雨': 'fa-tint',
        '大雨': 'fa-tint',
        '雷': 'fa-bolt',
        '雪': 'fa-snowflake-o',
        '雾': 'fa-smog'
    };

    // 空气质量颜色映射
    const airQualityColorMap = {
        '优': 'bg-green-500',
        '良': 'bg-blue-500',
        '轻度污染': 'bg-yellow-500',
        '中度污染': 'bg-orange-500',
        '重度污染': 'bg-red-500',
        '严重污染': 'bg-purple-500'
    };

    // 预警级别颜色映射
    const alarmLevelColorMap = {
        '蓝色': 'bg-blue-500',
        '黄色': 'bg-yellow-500',
        '橙色': 'bg-orange-500',
        '红色': 'bg-red-500'
    };

    // 生成当前时间
    function getCurrentTime() {
        const now = new Date();
        return now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    }

    // 生成当前日期
    function getCurrentDate() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
        const week = weekDays[now.getDay()];

        return {
            dateStr: `${year}/${month}/${day}`,
            weekStr: `星期${week}`
        };
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function () {
        // 设置初始日期
        const dateInfo = getCurrentDate();
        document.getElementById('date').textContent = dateInfo.dateStr;
        document.getElementById('week').textContent = dateInfo.weekStr;

        // 查询按钮事件
        document.getElementById('queryBtn').addEventListener('click', function() {
            const city = document.getElementById('cityInput').value.trim() || '杭州';
            const province = document.getElementById('provinceInput').value.trim();
            const ip = document.getElementById('ipInput').value.trim();

            fetchWeatherData(city, province, ip);
        });

        // 按回车键查询
        document.getElementById('cityInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('queryBtn').click();
            }
        });

        // 默认加载杭州天气
        fetchWeatherData('杭州');
    });

    // 获取天气数据
    function fetchWeatherData(city, province = "", ip = "") {
        // 显示加载状态
        updateLoadingState(true);

        // 构造请求数据
        const requestData = {
            city: city,
            ip: ip,
            province: province,
            cityid: "",
            adcode: ""
        };

        // 发送POST请求到后端
        fetch('/weather', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
            .then(response => {
                // 检查HTTP响应状态
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Received data:', data); // 调试信息

                // 修复：正确处理嵌套的数据结构
                let weatherData = null;
                if (data && data.success) {
                    // 根据提供的响应示例，实际天气数据在 data.data.data 中
                    weatherData = data.data && data.data.data ? data.data.data : data.data;
                } else if (data && data.data) {
                    weatherData = data.data;
                } else {
                    weatherData = data;
                }

                if (weatherData) {
                    renderWeatherData(weatherData);
                } else {
                    throw new Error('无法获取天气数据');
                }

                // 隐藏加载状态
                updateLoadingState(false);
            })
            .catch(error => {
                console.error('Error fetching weather data:', error);
                // 显示错误信息
                alert('获取天气数据失败，请稍后重试: ' + error.message);
                updateLoadingState(false);

                // 使用模拟数据进行演示
                renderWeatherData(getMockWeatherData());
            });
    }

    // 更新加载状态
    function updateLoadingState(isLoading) {
        const elements = document.querySelectorAll('#city, #country, #wea, #temp, #temp1, #temp2, #win, #winSpeed, #humidity, #visibility, #pressure, #airLevel, #airValue, #airTips, #airPm25, #pm10, #o3, #no2, #kouzhao, #yundong, #waichu, #kaichuang');

        if (isLoading) {
            elements.forEach(el => {
                el.textContent = '加载中...';
            });
            document.getElementById('weatherIcon').innerHTML = '<i class="fa fa-circle-o-notch fa-spin text-2xl text-primary"></i>';
        }
    }

    // 生成模拟天气数据用于演示
    function getMockWeatherData() {
        // 生成24小时温度数据，模拟24-31℃的波动
        const hours = [];
        const now = new Date();
        const currentHour = now.getHours();

        for (let i = 0; i < 24; i++) {
            const hour = (currentHour + i) % 24;
            // 模拟温度在24-31℃之间波动
            const temp = 24 + Math.sin(i * 0.3) * 3.5;

            // 随机生成天气状况
            const weatherTypes = ['晴', '多云', '阴', '小雨'];
            const wea = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];

            hours.push({
                hours: `${hour.toString().padStart(2, '0')}:00`,
                tem: Math.round(temp),
                wea: wea
            });
        }

        return {
            city: '杭州',
            country: '中国',
            update_time: getCurrentTime(),
            wea: '多云',
            tem: 29,
            tem1: 31,
            tem2: 26,
            win: '东南风',
            win_speed: '3级',
            humidity: '65%',
            visibility: '15km',
            pressure: '1013',
            air_level: '良',
            air: 75,
            air_tips: '空气质量可接受，但某些污染物可能对极少数异常敏感人群健康有较弱影响',
            air_pm25: '35',
            pm10: '50',
            o3: '80',
            no2: '25',
            aqi: {
                kouzhao: '建议佩戴防护口罩',
                yundong: '适宜户外运动',
                waichu: '适宜外出',
                kaichuang: '适宜开窗通风'
            },
            hours: hours
        };
    }

    // 渲染天气数据
    function renderWeatherData(data) {
        console.log('Rendering weather data:', data); // 调试信息

        // 更新基本信息
        document.getElementById('city').textContent = data.city || '--';
        document.getElementById('country').textContent = data.country || '--';
        document.getElementById('updateTime').textContent = `更新时间：${data.update_time || '--:--'}`;
        document.getElementById('wea').textContent = data.wea || '--';
        document.getElementById('temp').textContent = `${data.tem || '--'}°`;
        document.getElementById('temp1').textContent = `${data.tem1 || '--'}°`;
        document.getElementById('temp2').textContent = `${data.tem2 || '--'}°`;
        document.getElementById('currentTime').textContent = getCurrentTime();
        document.getElementById('feelsLike').textContent = `${(parseInt(data.tem) + 6) || '--'}°C`; // 体感温度比实际温度高6度

        // 更新天气图标
        let iconClass = 'fa-question';
        if (data.wea) {
            for (const [key, value] of Object.entries(weatherIconMap)) {
                if (data.wea.includes(key)) {
                    iconClass = value;
                    break;
                }
            }
        }
        document.getElementById('weatherIcon').innerHTML = `<i class="fa ${iconClass} text-2xl text-primary"></i>`;

        // 更新详细天气数据
        document.getElementById('win').textContent = data.win || '--';
        document.getElementById('winSpeed').textContent = data.win_speed || '--';
        document.getElementById('humidity').textContent = data.humidity || '--';
        document.getElementById('visibility').textContent = data.visibility || '--';
        document.getElementById('pressure').textContent = data.pressure || '--';
        document.getElementById('airLevel').textContent = data.air_level || '--';
        document.getElementById('airValue').textContent = data.air ? `AQI: ${data.air}` : '--';
        document.getElementById('airTips').textContent = data.air_tips || '--';

        // 更新空气质量颜色
        const airQualityDot = document.getElementById('airQualityDot');
        const airLevel = data.air_level || '未知';
        airQualityDot.className = `w-2 h-2 rounded-full ${airQualityColorMap[airLevel] || 'bg-gray-500'} mr-2`;

        // 更新空气质量详情
        document.getElementById('airPm25').textContent = data.air_pm25 || '--';
        document.getElementById('pm10').textContent = data.pm10 || (data.aqi && data.aqi.pm10) || '--';
        document.getElementById('o3').textContent = data.o3 || (data.aqi && data.aqi.o3) || '--';
        document.getElementById('no2').textContent = data.no2 || (data.aqi && data.aqi.no2) || '--';

        // 更新生活建议
        const aqiData = data.aqi || {};
        document.getElementById('kouzhao').textContent = aqiData.kouzhao || '--';
        document.getElementById('yundong').textContent = aqiData.yundong || '--';
        document.getElementById('waichu').textContent = aqiData.waichu || '--';
        document.getElementById('kaichuang').textContent = aqiData.kaichuang || '--';

        // 更新预警信息
        const alarmList = document.getElementById('alarmList');
        alarmList.innerHTML = '';

        if (data.alarm && data.alarm.length > 0) {
            data.alarm.forEach(alarm => {
                const alarmItem = document.createElement('div');
                alarmItem.className = 'bg-dark/50 rounded-lg p-4 hover:bg-dark/80 transition-all';
                alarmItem.innerHTML = `
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full ${alarmLevelColorMap[alarm.alarm_level] || 'bg-gray-500'} mr-2"></div>
                            <span class="${alarmLevelColorMap[alarm.alarm_level]?.replace('bg-', 'text-')?.replace('-500', '-400') || 'text-gray-400'}" id="alarmType">${alarm.alarm_type || '--'}</span>
                        </div>
                        <span class="text-sm ${alarmLevelColorMap[alarm.alarm_level]?.replace('bg-', 'text-')?.replace('-500', '-400') || 'text-gray-400'}" id="alarmLevel">${alarm.alarm_level || '--'}预警</span>
                    </div>
                    <div class="text-sm" id="alarmTitle">${alarm.alarm_title || '--'}</div>
                    <div class="text-xs text-light/70" id="alarmContent">${alarm.alarm_content || '--'}</div>
                `;
                alarmList.appendChild(alarmItem);
            });
        } else {
            alarmList.innerHTML = `
                <div class="bg-dark/50 rounded-lg p-4 text-center" id="noAlarm">
                    暂无预警信息
                </div>
            `;
        }

        // 更新小时预报图表
        renderHourlyChart(data.hours || []);
    }

    // 渲染小时预报图表
    function renderHourlyChart(hoursData) {
        const ctx = document.getElementById('hourlyChart').getContext('2d');

        // 如果已存在图表实例，先销毁
        if (window.hourlyChartInstance) {
            window.hourlyChartInstance.destroy();
        }

        // 准备数据
        const labels = hoursData.map(h => h.hours);
        const temps = hoursData.map(h => h.tem);

        // 获取当前时间的小时
        const now = new Date();
        const currentHour = now.getHours();
        const currentHourIndex = hoursData.findIndex(h => {
            const hour = parseInt(h.hours.split(':')[0]);
            return hour === currentHour;
        });

        window.hourlyChartInstance = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: '温度 (°C)',
                    data: temps,
                    borderColor: '#00bfff',
                    backgroundColor: 'rgba(0, 191, 255, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: function(context) {
                        if (context.dataIndex === currentHourIndex) {
                            return '#ff6b6b'; // 当前时间点用红色
                        }
                        return '#00bfff'; // 其他点用蓝色
                    },
                    pointRadius: function(context) {
                        if (context.dataIndex === currentHourIndex) {
                            return 6; // 当前时间点更大
                        }
                        return 3;
                    },
                    pointHoverRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(10, 25, 41, 0.9)',
                        titleColor: '#00bfff',
                        bodyColor: '#e6f7ff',
                        borderColor: '#00bfff',
                        borderWidth: 1,
                        callbacks: {
                            label: function(context) {
                                const hourData = hoursData[context.dataIndex];
                                return `温度: ${context.parsed.y}°C, ${hourData.wea}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            color: 'rgba(0, 191, 255, 0.2)'
                        },
                        ticks: {
                            color: '#00bfff',
                            maxRotation: 0
                        }
                    },
                    y: {
                        grid: {
                            color: 'rgba(0, 191, 255, 0.2)'
                        },
                        ticks: {
                            color: '#00bfff'
                        },
                        suggestedMin: Math.min(...temps) - 2,
                        suggestedMax: Math.max(...temps) + 2
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    }
</script>
</body>
</html>